<template>
	<view class="zone">
		<Header title="每日分红" color="#fff"></Header>
		<view class="button posabtn" @click="$p.navto('/pages/home/synthesis')">
			合成熊猫
		</view>

		
		<view class="main">
			<u-notice-bar mode="horizontal" type="none" color="#fff" :list="list2"></u-notice-bar>
			<scroll-view scroll-y class="scrollbox">
				<view class="list">
					<view class="item"> 
						<image class="character" src="http://img.cpgm.cc/panda/static/kit/10.png" mode="widthFix" />
						<view  class="right">
							<view class="title">熊猫忍者</view>
							<p class="can">可获得100战力</p>
						</view>
					</view>
					<view class="item martfu" v-for="(item , index) in list" :key="index"> 
						<image v-if="item.img" class="character" :src="`${imgurl}${item.img}`" mode="widthFix" />
						<view  class="right">
							<view class="title">{{item.name}}</view>
							<p class="can">激活可永久瓜分平台每日消耗银元</p>
							<view class="btnbox">
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="marr10 button" @click="jihuo(item)">
									<image :src="item.is_active?'http://img.cpgm.cc/panda/static/forest/jihuo2.png':'http://img.cpgm.cc/panda/static/forest/jihuo.png'" mode="heightFix" />
								</u-button>
								<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" @click="getBonus(item)" :class="[item.is_rece?'grey':'']" class=" button" >
									<image src="http://img.cpgm.cc/panda/static/forest/lingqu.png" mode="heightFix" />
								</u-button>
							</view>
							<p class="need">激活需要：{{item.name}}x1；激活石x{{item.stone}}</p>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>

		<u-mask :show="show">
			<view class="warp">
				<view class="maskbox">
					<image v-if="result.img" :src="`${imgurl}${result.img}`" mode="widthFix" />
					<h3>激活成功</h3>
					<p>每日可领{{result.stone}}银元</p>
					<view class="button" @click="show = false">确认</view>
				</view>
				<image class="closed" @click="show = false" src="http://img.cpgm.cc/panda/static/feed/cha2.png" mode="widthFix" />
			</view>
		</u-mask>

		<u-mask :show="show2">
			<view class="warp">
				<view class="maskbox">
					<image src="http://img.cpgm.cc/panda/static/kit/10.png" mode="widthFix" />
					<h3>您未获得该熊猫</h3>
					<p>通过碎片合成可获得熊猫忍者</p>
					<view class="button">去合成</view>
				</view>
				<image class="closed" @click="show = false" src="http://img.cpgm.cc/panda/static/feed/cha2.png" mode="widthFix" />
			</view>
		</u-mask>


		<u-mask :show ="show3">
			<view class="playbox" :class="[show2?'playboxac':'']">
				<image class="closed2" @click="show2 = false" src="http://img.cpgm.cc/panda/static/public/close.png" mode="widthFix" />
				<view class="content">
					<image class="yb" src="http://img.cpgm.cc/panda/static/mask/hec.png" mode="widthFix" />
					<image class="guang" src="http://img.cpgm.cc/panda/static/mask/guang.png" mode="widthFix" />
					<scroll-view scroll-y class="maskscroll"> 
						<view class="item">
							<view class="toptit">
								<h3>合成熊猫忍者</h3>
								<text>3个熊猫忍者碎片有几率合成1个熊猫忍者</text>
							</view>
							<p>当前拥有熊猫忍者碎片数量：10个</p>
							<view class="botbox">
								<image class="sp" src="http://img.cpgm.cc/panda/static/kit/s1.png" mode="widthFix" />
								<view class="arrow">
									<image src="http://img.cpgm.cc/panda/static/public/arrow.png" mode="widthFix" />
									<text>碎片x3</text>
								</view>
								<view class="cheng">
									<image src="http://img.cpgm.cc/panda/static/kit/10.png" mode="widthFix" />
								</view>
								<view class="button">立即合成</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-mask>



		<u-mask :show="resultshow">
			<view class="warp">
				<view class="maskbox2">
					<image class="topimg" src="http://img.cpgm.cc/panda/static/mask/laba.png" mode="widthFix" />
					<view class="wightbg">
						<p>恭喜您成功获得</p>
						<image src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
						<text>{{silver}}银元</text>
					</view>
				</view>
				<view class="mask_btn button" @click="resultshow = false">开心收下</view>
			</view>
		</u-mask>



	</view>
</template>

<script>
import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				imgurl: config.imgurl,
				list:[
					{
						stone:1,
					},
					{
						stone:3,
					},
					{
						stone:9,
					},
					{
						stone:27,
					},
					{
						stone:81,
					},
					{
						stone:243,
					},
					{
						stone:729,
					},
				],
				show:false,
				show2:false,
				show3:false,
				list2:['瓜分银元数量根据 平台每日消耗 每周一次调整 请大家理性看待'],
				result:'',
				resultshow:false,
				silver:'',
			};
		},
		onLoad (){
			this.composeList();
		},
		methods: {
			// 获取熊猫列表
			async composeList(){
				let res = await this.$http.index.composeList();
				this.stone = res.stone
				this.list = res.data.map((item,index)=>{
					return {
						...this.list[index] , 
						...item
					}
				})
				console.log(this.list);
			},

			// 激活
			async useractive(item){
				let res = await this.$http.index.useractive({
					id:item.id
				})
				if(res.code == 1) {
					this.composeList();
					this.result = item;
					this.show = true;
				}else {
					this.$u.toast(res.msg)
				}
			},

			jihuo(item){
				if(item.is_active) {
					this.$u.toast('已激活')
				}else{
					this.useractive(item)
				}
			},

			// 领取熊猫分红
			async getBonus(item){
				if(item.is_rece) {
					this.$u.toast('今日已领取')
				}else{
					let res = await this.$http.index.getBonus({
						id:item.id
					})
					if(res.code == 1) {
						this.silver = res.silver
						this.resultshow = true
					}else {
						this.$u.toast(res.msg)
					}
				}
			},


		},
	}
</script>

<style lang="less">
.zone {
	background: linear-gradient(180deg, #0477FD 0%, #77FDCD 100%);
	min-height: 100vh;
}

.posabtn {
	position: absolute;
	right: 12px;
	top: 12px;
	width: 98px;
	height: 36px;
	background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
	background-size: 100% 100%;
	color: #B73800;
	font-size: 14px;
	font-weight: 600;
	z-index: 999;
}

.main {
	padding: 0 10px;
}

.scrollbox {
	height: calc(100vh - 108px);
}

.list {
	margin-top: 10px;

	.martfu {
		margin-top: -30px;
	}

	.item {
		background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
		border-radius: 19px;
		padding: 15px 10px 45px;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.character {
			width: 30%;
			margin-right: 10px;
		}

		.right {
			flex: 1;

			.can {
				color: rgba(0, 0, 0, 0.9);
				font-size: 14px;
				font-weight: 600;
			}
		}

		.title {
			width: 70%;
			position: relative;
			color: #000000;
			font-size: 18px;
			font-weight: 600;
			z-index: 10;
			text-align: left;
			margin-bottom: 5px;
		}
		
		.title::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 90% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.btnbox {
			display: flex;
			align-items: center;
			margin: 10px 0;

			.button  {
				background: transparent !important;
				width: fit-content !important;
				padding: 0;
			}
			
			image {
				height: 40px;
			}
		}
		.need {
			font-size: 12px;
			color: #000000;
			font-weight: 600;
		}
	}

	.item:last-child {
		padding-bottom: 15px;
	}
}



// 弹窗

.maskbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;

	image {
		width: 40%;
		margin-top: -25%;
	}

	h3 {
		margin-top: -10px;
		font-size: 24px;
		position: relative;
		z-index: 10;
	}

	h3::after {
		content: '';
		width: 100%;
		height: 30px;
		background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
		background-size: 100% auto;
		background-position: center;
		background-repeat: no-repeat;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}

	p {
		color: #000000;
		font-size: 16px;
		font-weight: 600;
		margin: 30px 0;
	}

	.button {
		width: 70%;
		height: 55px;
		background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
		background-size: 100% 100%;
		color: #B73800;
		font-size: 18px;
		font-weight: 600;
	}
}

.closed {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 35px;
	margin: 0 auto;
	margin-top: 40px;
}









// 购买弹窗

.playbox {
	width: 100%;
	position: absolute;
	left: 0%;
	bottom: -70vh;
	background: url('http://img.cpgm.cc/panda/static/mask/beij.png');
	background-size: 100% 100%;
	transition: all 0.3s linear;

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;

		.yb {
			width: 40%;
			margin-top: -10%;
		}

		.guang {
			width: 100%;
			position: absolute;
			top: -15%;
			left:0;
			z-index: -1;
		}

		.maskscroll {
			height: calc(70vh);
			margin-top: 10%;
		}

		.item {
			background: rgba(255,255,255,0.7);
			padding: 10px;
			width: 100%;
			border-radius: 10px;

			.toptit {
				display: flex;
				align-items: center;

				text {
					font-size: 12px;
				}
			}

			p {
				color: #000000;
				font-size: 12px;
				font-weight: 600;
				margin-top: 5px;
			}

			.botbox {
				background: #FFFFFF linear-gradient(180deg, #0477FD 0%, #77FDCD 100%);
				border-radius: 4px;
				padding: 10px;
				margin-top: 10px;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.sp {
					width: 55px;
				}

				.arrow {
					position: relative;
					display: flex;
					align-items: center;
					justify-content: center;

					image {
						width: 55px;
					}

					text {
						font-size: 12px;
						color: #1794EA;
						position: absolute;
						zoom: 0.8;
					}
				}

				.cheng {
					width: 55px;
					height: 55px;
					background: linear-gradient(180deg, #C8C8C8 0%, #FFFFFF 100%);
					box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.46);
					border-radius: 4px;

					image {
						width: 100%;
					}
				}

				.button {
					width: 100px;
					height: 40px;
					background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
					background-size: 100% 100%;
					color: #B73800;
					font-size: 16px;
					font-weight: 600;
				}
			}

			h3 {
				width: fit-content;
				font-size: 14px;
				position: relative;
				z-index: 10;
			}

			h3::after {
				content: '';
				width: 100%;
				height: 30px;
				background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
				background-size: 100% auto;
				background-position: center;
				background-repeat: no-repeat;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
			}
		}
	}

	.closed2 {
		position: absolute;
		width: 25px;
		top: 3%;
		right: 15px;
	}
}

.playboxac {
	bottom:0 !important;
}

.numbox {
	width: 100%;
	background: #FFFFFF;
	border-radius: 6px;
	padding: 15px;
	margin-top: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;

	text {
		color: #1D1E24;
		font-size: 14px;
		font-weight: 600;
		margin-right: 20px;
	}

	.flex1 {
		flex: 1;
	}
}

.have {
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 600;
	margin-top: 10px;
	color: #000000;

	image {
		width: 20px;
	}
}

.have2 {
	font-size: 14px;
}


/deep/ .u-numberbox {
	width: 100%;
}
/deep/ .u-number-input {
	flex: 1 !important;
	background: transparent !important;
 }

 /deep/ .u-icon-minus {
	width: 30px;
	height: 30px !important;
	background: #FFFFFF !important;
	border-radius: 4px;
	border: 1px solid #979797;
 }

  /deep/ .u-icon-plus {
	width: 30px;
	height: 30px !important;
	background: #FFFFFF !important;
	border-radius: 4px;
	border: 1px solid #979797;
}









// 弹窗

.maskbox2 {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	min-height: 300px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.topimg {
		width: 35%;
		margin: 0 auto;
		margin-top: -25%;
	}

	h3 {
		color: #000000;
		font-size: 26px;
	}

	.wightbg {
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 9px;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 15px;

		p {
			position: relative;
			color: #000000;
			font-size: 20px;
			font-weight: 600;
			z-index: 2;
			padding: 0 10px;
		}

		p::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		image {
			width: 30%;
			margin: 10px 0;
		}
		text {
			color: #000000;
			font-size: 20px;
			font-weight: 600;
		}
	}
}

.mask_btn {
	width: 50%;
	height: 58px;
	background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: 30px;
	color: #B73800;
	font-weight: 600;
	font-size: 18px;
}

.grey {
	filter: grayscale(1);
}




</style>
